<template>
  <div class="draw-list-dialog">
    <el-dialog
      v-dialogDrag
      itle=""
      :visible="$store.state.matlab.isShowDrawList"
      :close-on-click-modal="false"
      width="70%"
      top="5vh"
      :modal="false"
      @close="hide"
    >
      <span slot="title" class="dialog-title"> 绘图目录 </span>
      <div class="body">
        <div class="draw-type-list">
          <div style="height: 100%">
            <el-input
              ref="searchInput"
              v-model="searchText"
              placeholder="搜索"
              size="mini"
              suffix-icon="el-icon-search"
              class="search-input"
            />
            <el-tabs v-model="activeName" tab-position="left">
              <el-tab-pane
                v-for="type in drawList"
                :key="type.name"
                :label="type.name"
              >
                <div
                  v-for="item in type.list"
                  :key="item.name"
                  class="draw-element"
                  :class="{
                    'draw-element-disabled': item.useable === false,
                    'draw-element-selected': item.type === selectedItem.type,
                  }"
                  @click.capture="handleClick(item)"
                >
                  <div class="img-container">
                    <!-- <img :src="item.picture" alt="" @click="draw" /> -->
                    <img :src="item.picture" alt="">
                  </div>
                  <div class="info">
                    <div style="font-weight: bold">{{ item.name }}</div>
                    <div>{{ item.intro }}</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div class="draw-document">
          <div class="selected-vars-info">
            <div class="selected-vars">已选择的变量： {{ selectedVars }}</div>
            <div>
              <el-button
                type="primary"
                plain
                size="mini"
                @click="openChooseVariable"
              >选择变量</el-button>
            </div>
          </div>
          <div class="wiki-page">
            <iframe :src="selectedItem.wiki" />
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="hide">取消</el-button>
        <el-button type="primary" size="mini" :disabled="!selectedItem.useable" @click="draw">绘制</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { plot, getDrawList } from '@/utils/plot.js';
export default {
  name: 'DrawListDialog',
  data() {
    return {
      searchText: '',
      activeName: '',
      selectedItem: {
        picture: require('@/assets/images/plottype-plot.png'),
        shortname: 'plot',
        name: 'plot' + '(' + this.selectedVars + ')',
        intro: '使用线性坐标区的二维线图',
        type: 'plot',
        wiki: process.env.BASE_URL + '/wiki/function/plot/plot/',
        useable: true
      }
    };
  },
  computed: {
    // 选择的变量
    selectedVars: function() {
      let selectedName = '';
      const selectedVars = this.$store.state.matlab.selectedVars;
      selectedVars.forEach((variable, index) => {
        if (index !== 0) {
          selectedName += ',';
        }
        selectedName += variable.Name;
      });
      return selectedName;
    },
    drawList: function() {
      return getDrawList(this.$store, this.searchText);
    }
  },
  watch: {
    // 更改drawList时，更改当前选择的变量
    drawList: function() {
      this.drawList.forEach(type => {
        type.list.forEach(item => {
          if (item.type === this.selectedItem.type) { this.selectedItem = item; }
        });
      });
    }
  },
  methods: {
    hide() {
      this.$store.commit('matlab/showDrawList', { isShow: false });
    },
    draw() {
      plot(this.$store, this.selectedItem.type);
    },
    handleClick(item) {
      this.selectedItem = item;
    },
    openChooseVariable() {
      this.$store.commit('matlab/showChooseVariable', { isShow: true });
    }
  }
};
</script>

<style lang="scss">
.draw-list-dialog {
  .el-dialog__wrapper{
    pointer-events: none;
  }
  .el-tab-pane{
    flex:1;
  }
  .el-dialog{
    height:70%;
    pointer-events: auto;
  }
  .el-tabs--left {
    overflow: auto;
    height: inherit;
  }

  .el-tabs__header {
    width: 30%;
  }
  .el-tabs__item {
    padding: 0px 20px 0px 5px;
  }

  .el-tabs__nav-scroll {
    display: flex;
    overflow: auto;
  }
  .el-tabs__nav{
    flex: 1;
  }
  .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
  }
  .el-tabs__content {
    display: flex;
    overflow: auto;
    height: 100%;
  }
  .el-dialog__body {
    height:calc(100% - 110px);
    padding: 0px 20px;
  }
  .draw-element {
    flex:1;
    display: flex;
    height: 50px;
    cursor: pointer;
    .img-container {
      height: 45px;
      width: 75px;
      margin: 4px 20px 0px 10px;
      // &:hover {
      //   border-radius: 3px;
      //   border: 1px solid #999;
      //   background: rgba($color: #FFF, $alpha: 0.3);
      // }
      img {
        height: 40px;
        width: 60px;
        margin: auto;
        display: block;
      }
    }
    .info {
      width: 100%;
      white-space: nowrap;
    }
  }

  .draw-element-disabled {
  //  filter: grayscale(100%);
    opacity: 0.5;
  }

  .draw-element-selected {
    background-color: rgb(64, 158, 255);
    color: white;
  }

  .draw-document {
    margin-left: 3px;
    padding: 2px;
    width: calc(100% - 367px);
    // display: inline-block;
    border: 2px solid rgb(228, 231, 237);

    .selected-vars-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 8%;
      overflow: hidden;
      .selected-vars {
        margin: auto 0;
        font-weight: bold;
        white-space: nowrap;
      }
    }
    .wiki-page {
      width: 100%;
      height: 92%;
      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }

  .draw-type-list {
    width: 370px;
    padding: 2px 2px 0px 2px;
    // display: inline-block;
    border: 2px solid rgb(228, 231, 237);
    overflow: hidden;
    //overflow: auto;
    .search-input{
      margin: -4px -4px 10px -4px;
      width: 375px;
    }
  }

  .dialog-title {
    font-weight: bold;
  }

  .body {
    display: flex;
    width: 100%;
    height: 100%;
  }

}
</style>
